<html>
    <head>
        <title>通过插槽分发内容</title>
    </head>
    <body>
        <script>
             // 七、通过插槽分发内容

                          // 和 html 元素一样，我们经常需要向一个组件传递内容，就像这样：
                                /*
                                      <alert-box>
                                          Something bad happend!
                                      </alert-box>
                                */

                          // 可能会渲染出这样的东西：

                                //  Error！ Something bad happened!

                          // 幸好， Vue自定义的 "<solt>元素" 让这变得非常简单：

                            Vue.component('alert-box',{
                                    template:`
                                        <div class="demo-alert-box">
                                            <strong>Error!</strong>
                                            <slot></slot>
                                        </div>
                                    `
                            })

                          // 如你所见，我们只要在需要的地方加入"插槽"就行了---就这么简单。
        </script>
    </body>
</html>